<script setup lang="ts" name="DevelopChart">
import { storeToRefs } from 'pinia'
import { useAppStoreWithOut } from '@/store/modules/app'
import { ChartApi } from '@/api/develop/chart'
import { initOptions } from '@/components/EChart/src/options'
import { initMap3DSeries, initMapSeries, initMapTooltip } from '@/components/EChart/src/options/series/map/utils'
import { getThemeColor } from '@/components/EChart/src/helper/theme'
import { sortByDesc } from '@/utils'
import { type EChartsOption, type ECharts, color } from 'echarts'
import { getJsonMap } from '@/components/EChart/src/helper'
import { themeBaseColor } from '@/utils/color/theme'
const { t } = useI18n() // 国际化

const appStore = useAppStoreWithOut()
const { systemConfig } = storeToRefs(appStore)

const mapLoading = ref(false) // map 接口加载
const mapJsonList: any = ref({})
const mapList = ref([])
const mapCode = ref('100002')
const mapOptions: any = ref(null)
const chartThemeColor = getThemeColor(systemConfig)
let echartRef: Nullable<ECharts> = null

/** 查询列表 */
const getMapList = async () => {
  mapLoading.value = true
  try {
    const data = await ChartApi.map(mapCode.value)
    mapList.value = data.sort(sortByDesc('value'))
    console.log('地图数据', mapList.value)
    mapOptions.value = initOptions(systemConfig)
    mapOptions.value.tooltip = initMapTooltip()
    mapOptions.value.visualMap = {
      type: 'continuous',
      dimension: 0,
      min: 0,
      max: data[0].value,
      inRange: {
        color: [chartThemeColor[4], chartThemeColor[3], chartThemeColor[2], chartThemeColor[1], chartThemeColor[0]]
      },
      textStyle: {
        color: systemConfig.value.isLight ? '#6e7079' : 'rgba(255,255,255,.5)'
      }
    }
    mapOptions.value.geo3D = { show: true, map: mapCode.value,
      label: {
        show: false
      },
      itemStyle: {
        opacity: 0
      },
      emphasis: {
        label: {
          show: false
        },
        itemStyle: {
          color: themeBaseColor.warning,
          opacity: 0.5
        }
      },
      viewControl: {
        projection: 'orthographic', // 投影方式
        orthographicSize: 80,
        autoRotate: false, // 是否开启视角绕物体的自动旋转查看
        autoRotateDirection: 'cw', // 物体自传的方向。默认是 'cw'，也可以取 'ccw'
        autoRotateSpeed: 10, // 物体自传的速度。角度 / 秒
        autoRotateAfterStill: 3, // 在鼠标静止操作后恢复自动旋转的时间间隔
        damping: 0, // 鼠标进行旋转，缩放等操作时的迟滞因子
        distance: 120, // 默认视角距离主体的距离
        alpha: 40, // 视角绕 x 轴，即上下旋转的角度
        beta: 10, // 视角绕 y 轴，即左右旋转的角度
        center: [0, 0, 0], // 视角中心点
        animation: true, // 是否开启动画
        animationDurationUpdate: 1000, // 过渡动画的时长
        animationEasingUpdate: 'cubicInOut' // 过渡动画的缓动效果
      } }
    const defaultSeries: any = initMap3DSeries(systemConfig)
    defaultSeries.map = mapCode.value
    defaultSeries.data = data
    mapOptions.value.series.push(defaultSeries)
    const scatterData: any = []
    mapList.value.forEach((item: any) => {
      scatterData.push({
        name: item.name,
        adcode: item.adcode,
        level: item.level,
        parent: item.parent,
        center: item.center,
        value: item.center ? [...item.center, item.value] : 0
      })
    })
    console.log('初始化的options', mapOptions)
    // mapOptions.value.series.push({
    //         name: 'Top 7',
    //         type: 'scatter3D',
    //         coordinateSystem: 'geo3D',
    //         data: scatterData,
    //         symbolSize: 12,
    //         symbol: 'pin',
    //         zlevel: 1,
    //         itemStyle: {
    //           color: '#ff0000'
    //         }
    //     })
    mapOptions.value.series.push({
        type: "scatter3D",
        coordinateSystem: "geo3D",
        data: scatterData,
        symbol: "pin",
        symbolSize: 20,
        itemStyle: {
          color: "transparent",
        },
        label: {
          show: true,
          position: "top",
          distance: 0,
          formatter: (params) => {
            return  `${params.data.name}\n${params.data.value[2]}个`;
          },
          textStyle: {
            color: "#fff",
            padding: [25, 40],
            backgroundColor: '#ff0000',
          },
        },
        zlevel: 10,
      })
    //     // 坐标点的配置
    //     mapOptions.value.series.push({
    //       type: 'effectScatter',
    //       coordinateSystem: 'geo',
    //       geoIndex: 0,
    //       rippleEffect: { //坐标点动画
    //         period: 5,
    //         scale: 1,
    //         brushType: 'fill'
    //       },
    //       label: {
    //         normal: {
    //           show: false,
    //           position: 'right',
    //           formatter: '{b}',
    //           color: '#FFEB90',
    //           fontWeight: "bold",
    //           fontSize: this.getFontSize(14),
    //         }
    //       },
    //       symbol: littleIcom,
    //       symbolSize: [this.getFontSize(22), this.getFontSize(22)],
    //       z: 999,
    //       symbolSize: this.getFontSize(12),
    //       showEffectOn: 'render',
    //       rippleEffect: {
    //           brushType: 'stroke',
    //       },
    //       hoverAnimation: true,
    //       itemStyle: {
    //         normal: {
    //           color: "#09DBFF", //标点颜色
    //         },
    //       },
    //       zlevel: 2,
    //       data: zuoArr
    //     })
    //     //地图标志框的配置
    //     mapOptions.value.series.push({
    //       type: 'scatter',
    //       coordinateSystem: 'geo',
    //       label: {
    //         show: true,
    //         formatter: function (params) {
    //             // console.log(params);
    //             return params.data.num+params.data.unit;
    //         },
    //         lineHeight: this.getFontSize(10),
    //         textAlign: 'center',
    //         color: '#ffffff',
    //         fontSize: this.getFontSize(14),
    //         padding: [4,24]
    //       },
    //       symbol: markImg,
    //       symbolSize: [this.getFontSize(120), this.getFontSize(32)],
    //       z: 999,
    //       data: biaozhi,
    //   })
  } finally {
    mapLoading.value = false
  }
}

const initChart = (e) => {
  echartRef = e
  if (echartRef) {
    echartRef.on('click', (v: any) => {
      console.log(v)
      if (v.data.value && v.data.level !== 'district') {
        mapCode.value = v.data.adcode + ''
        if (mapJsonList.value[mapCode.value]) {
          getMapList()
        }
      }
    })
  }
}

/** 初始化 **/
onMounted(async () => {
  mapJsonList.value = await getJsonMap()
  await getMapList()
})
</script>

<template>
  <PageCard center>
    <EChartMap v-if="mapOptions" :options="mapOptions" :code="mapCode" @init="initChart" />
  </PageCard>
</template>

<style scoped lang="scss"></style>
